<template>
  <div class="gl_contentBox gl_heightFull">
    <el-tabs v-model="activeTab" class="gn_tabs" type="card">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
        <component :is="item.component" v-if="item.name === activeTab" :ref="item.name" :active-tab="activeTab" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import group from './rankList/group.vue';
import individual from './rankList/individual.vue';
import coach from './rankList/coach.vue';
import leader from './rankList/leader.vue';
import areas from './rankList/area.vue';
export default {
  components: { group, individual, coach, leader, areas },
  data () {
    return {
      activeTab: 'group',
      tabList: [
        {
          label: '团体积分排名',
          name: 'group',
          component: group
        },
        {
          label: '个人积分排名',
          name: 'individual',
          component: individual
        },
        {
          label: '教练积分排名',
          name: 'coach',
          component: coach
        },
        {
          label: '领队积分排名',
          name: 'leader',
          component: leader
        },
        {
          label: '区域积分排名',
          name: 'areas',
          component: areas
        }
      ]
    };
  },
  watch: {
    activeTab: {
      handler(val) {
        if (this.$refs) {
          // if (val === 'group') {
          //   this.$refs[val][0].provinceCode = null;
          //   this.$refs[val][0].cityCode = null;
          //   this.$refs[val][0].countryCode = null;
          //   this.$refs[val][0].cityList = [];
          //   this.$refs[val][0].countryList = [];
          // }
          // this.$refs[val][0].selectedMsg.Keyword = '';
          // this.$refs[val][0].getPageList();
        }
      }
    }
  },
  created() {
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
.gn_tabs.el-tabs--card > .el-tabs__header{
  .el-tabs__nav{
    border: none;
    .el-tabs__item{
      background: #f7f7f7;
      border: 1px solid #e9e9e9;
      margin-right: 2px;
      border-radius: 4px 4px 0px 0px;
      &.is-active{
        background: #fff;
        border-bottom: transparent;
      }
    }
  }
}
</style>
